<template>
	<view class="card">
		<view class="card_head d-flex mb-30">
			<text class="card_head_title w-bold">更多查询服务</text>
		</view>
		
		<view class="card_content">
			<view class="card_left mr-20">
				<view class="card_describe mb-10">
					<text class="subtitle">数据精灵为您提供</text>
					<text class="subtitle activeText">32项</text>
					<text class="subtitle">数据查询服务，更多数据查询服务</text>
				</view>
				
				<text class="subtitle">持续更新中...</text>
			</view>
			
			<view class="icon_right">
				<image src="/static/image/home/right.svg" class="icon_right_image" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
</script>

<style scoped lang="scss">
.card {
	flex-direction: column;
	&_head {
		align-items: end;
		flex-direction: row;
		
		&_title {
			font: {
				size: 30rpx;
				weight: bold;
			}
		}
	}
	
	&_content {
		flex-direction: row;
		justify-content: space-between;
		align-items: center
	}
	
	&_describe {
		flex-direction: row;
		justify-content: space-between;
		align-items: center
	}
	
	.subtitle {
		color: #6C7282;
		font: {
			size: 23rpx;
		}
		
		&.activeText {
			color: #5F85FF;
			font: {
				weight: bold
			}
		}
	}
	
	.icon_right {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		border: 1px solid #5F85FF;
		
		&_image {
			margin: auto;
			width: 12rpx;
		}
	}
}
</style>
